<template>
    <div class="pageContainer">
        <div class="searchWarp">
            <el-form inline>
                <template v-for="condition in listCondition">
                    <CText :title="condition.name" v-model="condition.value"></CText>
                </template>
            </el-form>
            <div class="schLine">
                <CBtn @click="search(1)">查询</CBtn>
            </div>
        </div>
        <div class="treeTable">
            <div style="flex:1;">
                <div class="btnWarp">
                    <CBtn @click="showEdit">新增</CBtn>
                    <!-- <CBtn>批量删除</CBtn> -->
                </div>
                <CPageTable :data="tableData" :curPage="paging.curPage" :total="paging.total" @changeSize="changeSize"
                    @changePage="search">
                    <template slot-scope="scope">
                        <!-- <CBtn type="text" @click="showEdit(scope.row)">修改</CBtn>
                        <CBtn type="text" @click="doDel(scope.row)">删除</CBtn> -->
                        <CBtn type="text" @click="showDetail(scope.row)">详情</CBtn>
                    </template>
                </CPageTable>
            </div>
        </div>
        <CDailog title="新增/编辑" :isShow="isShowEdit" @close="isShowEdit = false" @enter="doSaveOrder">
            <el-form :inline="true" style="width:100%;">
                <div>
                    <CText form v-model="product.code" title="产品编码" field="title"></CText>
                    <CBtn @click="searchProduct" style="margin-top:15px;">查询</CBtn>
                    <CBtn @click="isShowImport = true" style="margin-top:15px;">选品</CBtn>
                </div>
                <div class="shopcart">
                    <div class="product_list">
                        <el-table :data="shopcart" style="width: 100%">
                            <el-table-column prop="name" label="商品">
                            </el-table-column>
                            <el-table-column prop="price" label="单价">
                            </el-table-column>
                            <el-table-column prop="num" label="数量" width="200">
                                <template slot-scope="scope">
                                    <CTextNum title="" v-model="scope.row.num"></CTextNum>
                                </template>
                            </el-table-column>
                            <el-table-column  label="小计">
                                <template slot-scope="scope">
                                    {{ scope.row.num * scope.row.price}}元
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="order_desc">
                        <div class="line">
                            <div class="title">会员：</div>
                            <div class="content">-</div>
                        </div>
                        <div class="line">
                            <div class="title">总价：</div>
                            <div class="content">{{total}}元</div>
                        </div>
                        <div class="line">
                            <div class="title">人工优惠：</div>
                            <div class="content">
                                <CText v-model="discount" style="width:100px"></CText>
                            </div>
                        </div>
                        <div class="line">
                            <div class="title">需支付：</div>
                            <div class="content">{{finalpay}}元</div>
                        </div>
                    </div>
                </div>
                
            </el-form>
        </CDailog>
        <CGoodsSelect v-if="isShowImport" @close="isShowImport = false" @selRow="selRow">

        </CGoodsSelect>

        <CDailog title="订单详情" :isShow="isShowDetail" @close="isShowDetail = false" :isShowEnter="false">
            <OrderDetail :id="detailid"></OrderDetail>
        </CDailog>
    </div>
</template>

<script>
import pagingMixin from '@/mixin/pagingMixin'
import OrderDetail from './OrderDetail.vue';
export default {
    mixins: [pagingMixin],
    components: {
        OrderDetail
    },
    data() {
        return {
            model: "oms",
            table: "OmsScxOrder",
            product: {
                code: ""
            },
            shopcart: [],
            discount: 0,
            isShowImport: false,
            isShowDetail: false,
            detailid: ""
        }
    },
    computed: {
        total() {
            let sum = 0;
            for (let item of this.shopcart) {
                sum = sum + (item.price * item.num);
            }
            return sum;
        },
        finalpay() {
            return this.total - this.discount;
        }
    },
    created() {
        this.templateId = "11a67b4b-a47f-4358-a7b3-f2a3653cdf1b";

        //取得查询条件
        this.$sys.getPageConditions({ id: this.templateId }).then(res => {
            this.listCondition = res.data;
        })
        //查询表格数据
        this.search(1);
    },
    methods: {
        showDetail(row) {
            this.isShowDetail = true;
            this.detailid = row.id;
        },
        searchProduct() {
            this.$scx.getProductByCode({ code: this.product.code }).then(res => {
                if (res.code == 200) {
                    let existProduct = this.shopcart.find(item => item.code == this.product.code);
                    if (existProduct) {
                        existProduct.num++;
                    } else {
                        this.shopcart.push({
                            name: res.data.product.name,
                            price: res.data.product.curPrice,
                            num: 1,
                            code: res.data.product.code,
                            id: res.data.product.id
                        })
                    }
                    this.isShowImport = false;
                    
                }
                
            })
        },
        doSaveOrder() {
            this.$scx.saveSYOrder({
                listProduct: this.shopcart,
                discount: this.discount
            }).then(res => {
                if (res.code == 200) {
                    this.$message.success("下单成功");
                    this.isShowEdit = false;
                    this.search();
                    this.product.code = "";
                    this.shopcart.splice(0);
                } else {
                    this.$message.error(res.msg);
                }
            })
        },
        showGoods() {

        },
        selRow(rows) {
            this.product.code = rows.code;
            this.searchProduct();
        }
    }
}
</script>

<style lang="scss" scoped>
.shopcart {
    width: 100%;
    display: flex;
    .product_list {
        width: 70%;
    }

    .order_desc {
        flex: 1;
        padding-top:30px;
        border-left: 1px solid #ccc;
        .line {
            height: 30px;
            line-height:30px;
            display: flex;
            align-items: center;
            .title {
                width: 80px;
                text-align: right;
            }
            .content {
                flex:1;
            }
        }
    }
}
</style>